// 声明全局变量 mapboxgl
declare global {
  let mapboxgl: typeof import("mapbox-gl");
}

// 存储 popup 实例
let popupList: { id: string; popup: mapboxgl.Popup }[] = [];

/**
 * 创建 popup
 * @param map - 地图实例
 * @param id - popup 的唯一标识
 * @param coordinates - popup 的经纬度坐标
 * @param content - popup 显示的 HTML 内容
 * @returns 创建好的 popup 实例
 */
export const createPopup = (map: mapboxgl.Map, id: string, coordinates: [number, number], content: string): mapboxgl.Popup => {
  try {
    const offset = {
      top: [0, 0],
      bottom: [0, -15],
      left: [0, 0],
      right: [0, 0]
    };

    const popup = new mapboxgl.Popup({
      closeButton: false,
      closeOnClick: false,
      offset: offset
    })
      .setLngLat(coordinates)
      .setHTML(content)
      .addTo(map);

    popupList.push({ id, popup });
    return popup;
  } catch (error) {
    console.error(`创建 popup (id: ${id}) 时出错:`, error);
    return null;
  }
};

/**
 * 根据 id 获取 popup
 * @param id - popup 的唯一标识
 * @returns 对应的 popup 实例，如果未找到则返回 null
 */
export const getPopupById = (id: string): mapboxgl.Popup | null => {
  try {
    if (popupList.length === 0) {
      return null;
    }
    const index = popupList.findIndex(m => m.id === id);
    if (index === -1) {
      return null;
    }
    return popupList[index].popup;
  } catch (error) {
    console.error(`获取 popup (id: ${id}) 时出错:`, error);
    return null;
  }
};

/**
 * 根据 id 更新 popup 内容
 * @param popup - popup 实例
 * @param newContent - 新的 HTML 内容
 */
export const updatePopup = (popup: mapboxgl.Popup, newContent: string): void => {
  try {
    if (popup) {
      popup.setHTML(newContent);
    }
  } catch (error) {
    console.error("更新 popup 内容时出错:", error);
  }
};

/**
 * 根据 id 更新 popup 位置
 * @param id - popup 的唯一标识
 * @param coordinates - 新的经纬度坐标
 */
export const updatePopupPositition = (id: string, coordinates: [number, number]): void => {
  try {
    const popup = getPopupById(id);
    if (popup) {
      popup.setLngLat(coordinates);
    }
  } catch (error) {
    console.error(`更新 popup (id: ${id}) 位置时出错:`, error);
  }
};

/**
 * 打开指定的 popup
 * @param map - 地图实例
 * @param id - popup 的唯一标识
 */
export const openPopup = (map: mapboxgl.Map, id: string): void => {
  try {
    const popup = getPopupById(id);
    if (popup) {
      popup.addTo(map);
    }
  } catch (error) {
    console.error(`打开 popup (id: ${id}) 时出错:`, error);
  }
};

/**
 * 关闭并移除指定的 popup
 * @param id - popup 的唯一标识
 */
export const closePopup = (id: string): void => {
  try {
    // debugger
    const index = popupList.findIndex(item => item.id === id);
    if (index !== -1) {

      popupList[index].popup.remove();
      popupList.splice(index, 1);
    }
  } catch (error) {
    console.error(`关闭 popup (id: ${id}) 时出错:`, error);
  }
};

/**
 * 关闭并移除所有 popup
 */
export const closeAllPopup = (): void => {
  try {
    popupList.forEach(item => {
      item.popup.remove();
    });
    popupList = [];
  } catch (error) {
    console.error("关闭所有 popup 时出错:", error);
  }
};

/**
 * 获取所有 popup 列表
 * @returns 包含所有 popup 实例的数组
 */
export const getAllPopup = (): mapboxgl.Popup[] => {
  try {
    return popupList.map(item => item.popup);
  } catch (error) {
    console.error("获取所有 popup 列表时出错:", error);
    return [];
  }
};
